<template>
    <div id="body">
        <div id="hader">
            <div>库存列表</div>
        </div>
        <div style="margin-top: 15px;border-bottom: 1px solid #ebeef5;overflow: hidden;height: 50px">
            <div id="cplb">
                <el-select v-model="qureyvalue.index" placeholder="请选择类别">
                    <el-option
                            v-for="item in options"
                            :key="item.ingredientstypeId"
                            :label="item.ingredientstypeName"
                            :value="item.ingredientstypeId">
                    </el-option>
                </el-select>
            </div>
            <div id="cpmc">
                <el-input style="width:250px " v-model="qureyvalue.name" placeholder="请输入原料名称"></el-input>
                <el-button  style="margin-left: 15px" type="primary" icon="el-icon-search" @click="check">搜索</el-button>

            </div>
            <div id="jh">
                <el-button  type="primary" @click="dialogVisible = true">进货<i class="el-icon-upload el-icon--right"></i></el-button>
            </div>
        </div>
        <div style="margin-top: 5px">
            <el-table
                    :data="tableData"
                    stripe
                    style="width: 100%">
                <el-table-column
                        prop="ingredientsId"
                        label="材料编号"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="ingredientsName"
                        label="材料名称"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="ingredientstypeName"
                        label="材料分类">
                </el-table-column>
                <el-table-column
                        prop="ingredientsConut"
                        label="材料余量">
                </el-table-column>
                <el-table-column
                        prop="ingredientsCompany"
                        label="单位">
                </el-table-column>
                <el-table-column
                        prop="IngredientstypeDate"
                        label="进货日期">
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                type="danger"
                                @click="dele(scope.row.ingredientsId)">删除 </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    background
                    layout="prev, pager, next,total,slot,jumper"
                    @size-change="fenye"
                    @current-change="fenye"
                    :current-page.sync="saleQueryBo.page.current"
                    :page-size.sync="saleQueryBo.page.size"
                    :page-sizes="[2, 4, 6, 8, 10]"
                    :total="totlCount" style="margin-left: 600px">
            </el-pagination>
        </div>
        <div>
            <el-dialog
                    :visible.sync="dialogVisible"
                    width="25%"
                    :before-close="handleClose">
                <h1 style="margin-left: 180px;margin-top: -35px">进货</h1>
                <div id="zengjia">
                    <div>
                    <span style="font-size: 25px;font-weight: bold">材料名称:</span><el-input label="原料" style="width:250px;margin-left: 10px" v-model="Tadd.cname" placeholder="请输入内容"></el-input>
                    </div>
                    <div  >
                        <span style="font-size: 25px;font-weight: bold">材料分类:</span>
                        <el-select style="width:250px;margin-left: 10px" v-model="Tadd.indexc" placeholder="请选择类别">
                            <el-option
                                    v-for="item in options"
                                    :key="item.ingredientstypeId"
                                    :label="item.ingredientstypeName"
                                    :value="item.ingredientstypeId">
                            </el-option>
                        </el-select>
                    </div>
                    <div>
                        <span style="font-size: 25px;font-weight: bold">材料数量:</span><el-input label="原料" style="width:250px;margin-left: 10px" v-model="Tadd.cnum" placeholder="请输入内容"></el-input>
                    </div>
                    <div >
                        <span style="font-size: 25px;font-weight: bold">材料单位:</span><el-input label="原料" style="width:250px;margin-left: 10px" v-model="Tadd.cdw" placeholder="请输入内容"></el-input>
                    </div>
                </div>
                <span style="margin-right: 150px" slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="dialogVisible = false,Addingredients()">确 定</el-button>
                      <el-button @click="dialogVisible = false">取 消</el-button>
                </span>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    export default {
        name: "KuCun",
        data(){
            return{
                saleQueryBo:{
                    page:{
                        current:1,
                        size:2
                    },
                    businessId:JSON.parse(sessionStorage.getItem("clerk")).clerkBusinessId
                },
                totlCount:null,
                options: {
                    ingredientstypeId: '',
                    ingredientstypeName: ''
                },
                qureyvalue:{
                    name:null,
                    index:null,
                    businessId:JSON.parse(sessionStorage.getItem("clerk")).clerkBusinessId
                } ,
                tableData:{
                },
                dialogVisible:false,
                Tadd:{
                    indexc:null,
                    cname:null,
                    cnum:null,
                    cdw:null,
                    businessId:JSON.parse(sessionStorage.getItem("clerk")).clerkBusinessId
                }
            }
        },methods:{
            dele(id) {
                let c=confirm("确定要删除？")
                if (c==true){
                    this.$axios.post("administration/ingredients/dele",id).then(response=>{
                        if (response.data!=null){
                            alert("删除成功")
                        }
                    })
                }
            },
            check(){
                this.$axios.post("administration/ingredients/qurey",this.qureyvalue).then(response=>{
                    if (response.data!=null){
                        this.tableData=response.data
                        this.totlCount=response.data.total
                    }
                })
            },
            Addingredients(){
                this.$axios.post("administration/ingredients/Addmany",this.Tadd).then(response=>{
                    if (response.data!=null){
                        this.fenye()
                        alert("添加成功")
                    }
                })
            },
            fenye(){
                this.$axios.post("administration/ingredients/see",this.saleQueryBo).then(response=>{
                    if (response.data!=null){
                        this.tableData=response.data.records
                        this.totlCount=response.data.total
                    }
                })
            }
        },
        mounted() {
            this.$axios.post("administration/ingredients/see",this.saleQueryBo).then(response=>{
                if (response.data!=null){
                    this.tableData=response.data.records
                    this.totlCount=response.data.total
                }
            })
            this.$axios.post("administration/ingredientstype/tall").then(response=>{
                if (response.data!=null){
                    this.options=response.data
                }
            })

        }
    }
</script>

<style scoped>
    #body{
        width: 80vw;
        height: 100%;

    }
    #hader{
        background-color: #ffffff;
        border: 1px solid #eeeeee;
        border-radius: 3px;
        overflow: hidden;
        height: 60px;
        line-height: 60px;
        box-shadow: inset 1px 1px 1px 1px #eeeeee;
        text-align: center;

    }
    #hader div{
        size: 14px;
        cursor: pointer;
        color: #cccccc;
        font-weight: bold;

    }
    #cplb{
        float: left;
    }
    #cpmc{
        margin-left: 35px;
        float: left;
    }
    #jh{
        float: left;
      margin-left: 150px;
    }
    #zengjia{
        overflow: hidden;
    }
    #zengjia>div{
        line-height: 60px;
    }
</style>